<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>展览图片修改</title>
     <!-- 给当前页面域添加一段java代码，用来自动获取当前项目名，不写死,然后再通过EL表达式获取 -->
    <%
    	pageContext.setAttribute("PATH",request.getContextPath());
    
     %>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" href="${PATH}/css/bootstrap.css">
	<%-- <script type="text/javascript" src="${PATH}/js/bootstrap.js"></script> --%>
  </head>
  
  <body>
    	<form action="${PATH}/admin/YxhqUpdate.do" method="post" enctype="multipart/form-data">      
		        <table width="900" border="1">  
		            <tr>                
		               <th>ID</th>
				       <th>原图片的缩略图</th>
				       <th>上传新图</th>
				       <th>婚庆公司名</th>
				       <th>区域</th>
				       <th>婚礼风格</th>
				       <th>电话</th>
				       <th>简介信息</th>
				       <th>短视频地址</th>  
				       <th>排序</th>  
		            </tr>           
		            <tr>  
		            	<td><input type="text" id="id" name="id" value="${yxhq.id }" readonly="readonly"></td>
		                <td><img alt="图片" src="${yxhq.url }" height="200px" width="200px"></td>  
		                <td>
		                	<input type="file" name="img" id="mFile"/>
		                	<div>
					       		 <img id="mImg" src="" style="width: 300px;height: 200px;">
					    	</div>
		                </td> 
		                <td><input type="text" name="pname" value="${yxhq.pname }"></td>
		                <td><input type="text" name="region" value="${yxhq.region }"></td>
		                <td><input type="text" name="sty" value="${yxhq.sty }"></td>
		                <td><input type="text" name="phone" value="${yxhq.phone }"></td>
		                
		                <td> <textarea rows="15" cols="10" name="details">${yxhq.details }</textarea></td>
		                <td><input type="text" name="videoUrl" value="${yxhq.videoUrl }"></td>
		                <td><input type="number" name="sort" value="${yxhq.sort }"></td>
		                
		                 
		           </tr>  
		    	</table>  
    		<input class="btn btn-success" type="submit" value="提交"/>  
    		<input class="btn btn-warning" type="reset" value="取消"/>    
    	</form>  
    	<!-- 新图片的显示 -->
    	<script type="text/javascript">
	        document.getElementById('mFile').onchange = function (ev) {
	            //判断 FileReader 是否被浏览器所支持
	            if (!window.FileReader) return;
	            console.log(ev);
	            var file = ev.target.files[0];  
	            
	            if(!file.type.match('image/*')){
	                alert('上传的图片必修是png,jpg格式的！');
	                ev.target.value = ""; //显示文件的值赋值为空
	                return;
	            }
	
	            var reader = new FileReader();  // 创建FileReader对象
	            reader.readAsDataURL(file); // 读取file对象，读取完毕后会返回result 图片base64格式的结果
	            reader.onload = function(e){
	                document.getElementById('mImg').src = e.target.result;
	            }
	        }
	    </script>
  </body>
</html>
